<template>
    <div class="news-container">
        <h3 class="title">{{newsInfo.title}}</h3>
        <div class="time">
            <span>发表时间: {{newsInfo.add_time | dateFormat('YYYY-MM-DD HH:mm:ss') }}</span>
            <span>点击 {{newsInfo.click}} 次</span>
        </div>
        <hr>
        <div class="content" v-html="newsInfo.content"></div>

        <!-- 评论  newsinfo父组件 向子组件comment传参-->
        <comment-box :id="this.id"></comment-box>
    </div>

</template>

<script>
    import { Toast } from 'mint-ui';
    // 导入评论组件
    import comment from '../subcomponents/Comment.vue'
    export default{
        data () {
            return {
                id: this.$route.params.id,
                newsInfo: {}
            }
        },
        created () {
            this.getNewsInfo();
        },
        methods: {
            getNewsInfo(){
                this.$http.get('api/getnew/' + this.id) .then((res)=>{
                    // console.log(res);
                    if (res.body.status === 0) {
                        this.newsInfo = res.body.message[0]; // message是一个数组,只有一项数据,是一个对象
                    } else {
                        Toast('获取新闻详情页失败');
                    }
                })
            }
        },
        components: {
            'comment-box': comment  // 子组件
        }
    }
</script>

<style lang="less">
    .news-container {
        padding: 0 5px;
        .title {
            font-size: 16px;
            text-align: center;
            line-height: 30px;
            color: #f05;
        }
        .time {
            display: flex;
            justify-content:space-between;
            font-size: 14px;
            color: cornflowerblue;
        }
        .content {
            p {
                color: rgb(32, 32, 32);
            }
            img {
                width: 100%;
            }
        }
    }
</style>


